<template>
    <view :class="'pop pop--' + type + ' ' + (show ? 'pop--show' : '')">
        <view v-if="overlay" :class="'pop__mask ' + (showOverlay ? '' : 'pop__mask--hide')" @click="handleMaskClick"></view>
        <view class="pop__container">
            <slot></slot>
        </view>
    </view>
</template>

<script>
'use strict';

export default {
    data() {
        return {};
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        // 是否有遮罩层
        overlay: {
            type: Boolean,
            default: true
        },
        // 遮罩层是否会显示
        showOverlay: {
            type: Boolean,
            default: true
        },
        // 内容从哪个方向出，可选 center top bottom left right
        type: {
            type: String,
            default: 'center'
        }
    },
    methods: {
        handleMaskClick: function handleMaskClick() {
            this.$emit('clickmask', {
                detail: {}
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
